<template>
  <div class="image-box">
    <el-image :src="url" lazy>
      <template #error>
        <div class="image-slot">
          <el-icon><Picture /></el-icon>
        </div>
      </template>
      <template #placeholder>
        <div class="image-slot-loading">Loading<span class="dot">...</span></div>
      </template>
    </el-image>
  </div>
</template>
<script setup lang="ts">
import { Picture } from '@element-plus/icons-vue';
defineProps({
  url: {
    type: String,
    required: true,
  },
});
</script>
<style lang="less" scoped>
@import './index.less';
</style>
